const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') //压缩 css

module.exports = {
    entry: [
        './src/js/index.js',
        './src/index.html'
    ],
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'js/bundle.js'
    },
    resolve: {
        //导入语句省略后缀
        extensions: ['.ts', '.js', '.json'],
        //导入路径的别名
        alias: {
            css: path.resolve(__dirname, './src/css')
        },
        //解析模块目录
        // modules: [path.resolve(__dirname, '../node_modules'), 'node_modules']
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //执行顺序是从右往左边
                use : [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath : '../'
                        }
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders : 1
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "presets": [
                            ["@babel/preset-env", {
                                useBuiltIns: "usage", //按需引入需要使用polyfill
                                corejs: { version: 3 }, //解决不能找到core-js的问题
                                targets: { //解决兼容性处理哪些浏览器
                                    "chrome": "58",
                                    "ie": "9"
                                }
                            }]
                        ],
                        "cacheDirectory": false // 开启babel缓存，只编译未编译代码，可减少编译时间
                    }
                }
            },
            {
                test: /.js$/,
                loader: 'eslint-loader',
                //编译前执行
                enforce: 'pre',
                //不检查的目录
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        outputPath: 'images',
                        name: '[hash:5].[ext]'
                    }
                }
            },
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            {
                test: /\.(eot|svg|woff|woff2|ttf|mp3|mp4)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath: 'media',
                        name: '[hash:5].[ext]'
                    }
                }]
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        minify: {
            removeComments: true, //去掉注释
            collapseWhitespace: true, //去掉空格
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }
    }), new OptimizeCSSAssetsPlugin({
        cssProcessorPluginOptions: {
            preset: [
                'default',
                {
                    discardComments: {
                        removeAll: true
                    },
                },
            ]
        },
        cssProcessorOptions: {
            map: {
                inline: false,
                annotation: true
            }
        }
    })]
}